﻿<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="inputStandard" class="col-lg-3 control-label">Standard</label>
        <div class="col-lg-8">
            <input type="text" id="inputStandard" class="form-control" placeholder="Type Here...">
        </div>
    </div>
    <div class="form-group">
        <label for="inputPassword" class="col-lg-3 control-label">Password</label>
        <div class="col-lg-8">
            <input type="password" class="form-control" id="inputPassword" placeholder="Password">
        </div>
    </div>
    <div class="form-group">
        <label for="disabledInput" class="col-lg-3 control-label">Disabled</label>
        <div class="col-lg-8">
            <input class="form-control" id="disabledInput" type="text" placeholder="A Disabled Form" disabled="">
        </div>
    </div>
    <div class="form-group">
        <label class="col-lg-3 control-label" for="textArea1">Text Area Expand</label>
        <div class="col-lg-8">
            <textarea class="form-control textarea-grow" id="textArea1" rows="4"></textarea>
        </div>
    </div>
    <div class="form-group">
        <label class="col-lg-3 control-label" for="textArea2">Text Area</label>
        <div class="col-lg-8">
            <textarea class="form-control" id="textArea2" rows="3"></textarea>
        </div>
    </div>
    <div class="form-group">
        <label class="col-lg-3 control-label" for="textArea3">Disabled Text Area</label>
        <div class="col-lg-8">
            <textarea class="form-control" id="textArea3" rows="3" disabled=""></textarea>
        </div>
    </div>
</form>

<form class="form-horizontal" role="form">
    <div class="form-group has-primary">
        <label class="col-lg-3 control-label" for="inputPrimary">Primary Field</label>
        <div class="col-lg-8">
            <span class="append-icon right">
                <i class="fa fa-gear"></i>
            </span>
            <input type="text" class="form-control" id="inputPrimary">
        </div>
    </div>
    <div class="form-group has-success">
        <label class="col-lg-3 control-label" for="inputSuccess">Success Field</label>
        <div class="col-lg-8">
            <span class="append-icon right">
                <i class="fa fa-check"></i>
            </span>
            <input type="text" class="form-control" id="inputSuccess">
        </div>
    </div>
    <div class="form-group has-info">
        <label class="col-lg-3 control-label" for="inputInfo">Info Field</label>
        <div class="col-lg-8">
            <span class="append-icon right">
                <i class="fa fa-exclamation-circle"></i>
            </span>
            <input type="text" class="form-control" id="inputInfo">
        </div>
    </div>
    <div class="form-group has-warning">
        <label class="col-lg-3 control-label" for="inputWarning">Warning Field</label>
        <div class="col-lg-8">
            <span class="append-icon right">
                <i class="fa fa-exclamation-triangle"></i>
            </span>
            <input type="text" class="form-control" id="inputWarning">
        </div>
    </div>
    <div class="form-group has-error">
        <label class="col-lg-3 control-label" for="inputError">Error Field</label>
        <div class="col-lg-8">
            <span class="append-icon right">
                <i class="fa fa-remove"></i>
            </span>
            <input type="text" class="form-control" id="inputError">
        </div>
    </div>
    <div class="form-group has-alert">
        <label class="col-lg-3 control-label" for="inputAlert">Alert Field</label>
        <div class="col-lg-8">
            <span class="append-icon right">
                <i class="fa fa-flag"></i>
            </span>
            <input type="text" class="form-control" id="inputAlert">
        </div>
    </div>
    <div class="form-group has-system">
        <label class="col-lg-3 control-label" for="inputSystem">System Field</label>
        <div class="col-lg-8">
            <span class="append-icon right">
                <i class="fa fa-bell"></i>
            </span>
            <input type="text" class="form-control" id="inputSystem">
        </div>
    </div>
</form>


<form class="form-horizontal" role="form">
    <label class="col-md-2 text-right">With Icons</label>
    <div class="col-md-10 ph30">
        <div class="form-group">
            <div class="input-group">
                <span class="input-group-addon">
                    <i class="fa fa-envelope-o"></i>
                </span>
                <input class="form-control" type="text" placeholder="Email address">
            </div>
        </div>
        <div class="form-group">
            <div class="input-group">
                <span class="input-group-addon">
                    <i class="fa fa-key"></i>
                </span>
                <input class="form-control" type="password" placeholder="Password">
            </div>
        </div>
        <div class="form-group">
            <div class="input-group">
                <input class="form-control" type="text" placeholder="Numbers">
                <span class="input-group-addon">00</span>
            </div>
        </div>
        <div class="form-group">
            <div class="input-group">
                <input class="form-control" type="password" placeholder="Money">
                <span class="input-group-addon">
                    <i class="fa fa-usd"></i>
                </span>
            </div>
        </div>
    </div>

</form>